import React from 'react';
import {withRouter} from 'react-router-dom';
import { TabBar } from 'antd-mobile';
import '../style/Footer.less';

 class Footer extends React.Component{
  render(){
    // console.log(this.props.history);
    const {push,location} = this.props.history;
    // console.log(location.pathname);
    return (
      <footer className="page-footer">
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
        >
        <TabBar.Item
            title="首頁"
            key="Home"
            icon={<div className="icon-zfb" />}
            selectedIcon={<div className="icon-zfb-selected" />
            }
            selected={location.pathname === '/home'}
            badge={1}
            onPress={() => {
              push('/home')
            }}
            data-seed="logId"
          >
          </TabBar.Item>
          <TabBar.Item
            title="关注"
            key="Star"
            icon={<div className="icon-zfb" />}
            selectedIcon={<div className="icon-zfb-selected" />
            }
            selected={location.pathname === '/test'}
            // selected={true}
            badge={1}
            onPress={() => {
              push('/test')
            }}
            data-seed="logId"
          >
          </TabBar.Item>
          <TabBar.Item
            title="我的"
            key="Mine"
            icon={<div className="icon-zfb" />}
            selectedIcon={<div className="icon-zfb-selected" />
            }
            // selected={true}
            selected={location.pathname === '/mine'}
            badge={1}
            onPress={() => {
              push('/mine')
            }}
            data-seed="logId"
          >
          </TabBar.Item>
        </TabBar>
      </footer>
    )
  }
}

export default withRouter(Footer);